<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>莱绅通灵系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./css/x-admin.css" media="all">
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>会员管理</cite></a>
			<a><cite>产品详情</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<form id="form_product" class="layui-form x-center"
			style="width: 100%" onsubmit="return false">
			<!-- 默认取消form表单提交事件 -->
			<div class="layui-form-pane" style="margin-top: 15px;">
				<div class="layui-form-item">
					<div class="layui-input-inline">
						<select id="productCategoryId" name="productCategoryId">
							<option value="">请选择系列</option>
							
						</select>
					</div>
					<div class="layui-input-inline">
						<select name="productSize">
							<option value="">请选择尺寸</option>
							<option value="60分">60分</option>
							<option value="50分">50分</option>
							<option value="30分">30分</option>
							<option value="20分">20分</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<select name="productColor">
							<option value="">请选择颜色</option>
							<option value="H">H</option>
							<option value="F">F</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<select name="productNetDegree">
							<option value="">请选择净度</option>
							<option value="VVS">VVS</option>
							<option value="VS">VS</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<select name="productSpecification">
							<option value="">请选择切工</option>
							<option value="黄金">黄金</option>
							<option value="红金">红金</option>
							<option value="白金">白金</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<select name="isCutomize">
							<option value="">是否定制</option>
							<option value="yes">yes</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<select name="productMaterial">
							<option value="">产品材质</option>
							<option value="钻石">钻石</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<input type="text" name="productName" placeholder="产品名称"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline">
						<input type="text" name="beginPrice" placeholder="起始价格"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline">
						<input type="text" name="endPrice" placeholder="结束价格"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<button class="layui-btn" onclick="myPage()" 
							lay-filter="*">
							<i class="layui-icon">&#xe615;</i>搜索
						</button>
					</div>
				</div>
			</div>
		</form>
		<xblock>
		<button class="layui-btn layui-btn-danger" onclick="delAll()">
			<i class="layui-icon">&#xe640;</i>批量删除
		</button>

		<button class="layui-btn"
			onclick="product_add('添加产品','product-add.html','800','600')">
			<i class="layui-icon">&#xe608;</i>添加
		</button>
		<span class="x-right" style="line-height: 40px">共有数据：<span id ="count"></span> 条</span></xblock>
		<table class="layui-table">
			<thead>
				<tr>
					<th><input onclick="selectAll(this)" type="checkbox" name="" value=""></th>
					<th>产品Id</th>
					<th>产品名称</th>
					<th>市场价</th>
					<th>产品售价</th>
					<th>设计语言</th>
					<th>产品缩略图</th>
					<th>产品材质</th>
					<th>品牌</th>
					<th>主石尺寸</th>
					<th>主石净度</th>
					<th>产品颜色</th>
					<th>是否定制</th>
					<th>产品切工</th>
					<th>产品分类</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tbody_product">

			</tbody>
		</table>
		<div id="page"></div>
	</div>
	<script src="./lib/layui/layui.js" charset="utf-8"></script>
	<script src="./js/x-layui.js" charset="utf-8"></script>
	<script>
	var $ = null;
	var laypage = null;
	var layer = null;
	var form = null;
            layui.use(['element','laypage','layer','form'], function(){
               $ = layui.jquery;//jquery
              laypage = layui.laypage;//分页
              layer = layui.layer;
              form = layui.form;
              $(function(){
            	  myPage();
            	  productcate();
				});
             
            });
          //分页显示
   		 function myPage(){
           	 $.post("../adminProduct?reqName=getAllProducts",$("#form_product").serialize(),function(res){
           		 $("#count").html(res);
           	  laypage.render({
           	    elem: 'page',
           	    count: res,
           	    limit: 2,
           	    jump: function(obj, first){
           	        selProduct(obj.curr,obj.limit);
           	      }
           	  });
           	 },"json");
           }
          
            function productcate(){
            	$.post("../adminProductCategory?reqName=getAllProductCate",{},function(res){
            		for(var i=0;i<res.length;i++){
            		$("#productCategoryId").append("<option value="+res[i].productSeriesId+">"+res[i].productSeriesName+"</option>");
            			form.render("select");
            		}
            	},"json");
            }
            
            
             //查询所有产品
            function selProduct(page,size){
            	$("#tbody_product").html("");
            	$.post("../adminProduct?reqName=getProducts",$.param({page:page,size:size})+'&'+$("#form_product").serialize(),function(res){
            		for(var i = 0;i<res.length;i++){
            			$("#tbody_product").append(` <tr>
                                <td>
                                <input type="checkbox" value="1" name="">
                            </td>
                            <td>${res[i].productId}</td>
                            <td>
                            ${res[i].productName}
                            </td>
                            <td>
                            ${res[i].productPrice}
                            </td>
                            <td>
                            ${res[i].salePrice}
                            </td>
                            <td>
                           	<textarea required lay-verify="required"  class="layui-textarea">${res[i].productTexture}</textarea>
                            </td>
                            <td>
                            <img  src="../${res[i].productPicture}" width="200" alt="">
                            </td>
                            <td>
                            ${res[i].productMaterial}
                            </td>
                            <td>
                            ${res[i].productBrand}
                            </td>
                            <td>
                            ${res[i].productSize}
                            </td>
                            <td>
                            ${res[i].productNetDegree}
                            </td>
                            <td>
                            ${res[i].productColor}
                            </td>
                            <td>
                            ${res[i].isCutomize}
                            </td>
                            <td>
                            ${res[i].productSpecification}
                            </td>
                            <td>
                            ${res[i].productSeriesName}
                            </td>
                            <td class="td-manage">
                                <a title="编辑" href="javascript:;" onclick="product_edit('编辑产品','product-edit.html','${res[i].productId}','','510')"
                                class="ml-5" style="text-decoration:none">
                                    <i class="layui-icon">&#xe642;</i>
                                </a>
                                <a title="删除" href="javascript:;" onclick="product_del(this,${res[i].productId})" 
                                style="text-decoration:none">
                                    <i class="layui-icon">&#xe640;</i>
                                </a>
                            </td>
                        </tr>`);
            		}
            	},"json");
            }
             //全选或全不选
            function selectAll(obj){
           	   var val = $(obj).prop("checked");
           	  $("#tbody_product input:checkbox").prop("checked",val)
             }

           //批量删除提交
            function delAll () {
           var chks=$("#tbody_product input:checkbox:checked");
           	if(chks.length == 0){
           		layer.alert("您未选择任何行!");
           		return false;
           	}
           	
               layer.confirm('确认要删除吗？',function(index){
                  var ids= [];
               	for(var i=0;i<chks.length;i++){
                   	var id=$(chks[i]).parent().next().html();
                   	ids.push(id);
                   }
               	$.post("../adminProduct?reqName=deleteProductByIds",{
               		productId:ids.join(",")
               	},function(res){
               		if(res.success){
               			layer.msg('删除成功', {icon: 1});
               			myPage();
               		}else{
               			 layer.msg('删除失败', {icon: 3});
               		}
               	},"json")
               });
            }
             /*添加*/
             function product_add(title,url,w,h){
                 x_admin_show(title,url,w,h);
             }
            

            //-编辑
            function product_edit (title,url,id,w,h) {
            	sessionStorage.setItem("productId",id);
                x_admin_show(title,url,w,h); 
            }
            
            
            /*-删除*/
    		function product_del(obj, id) {
    			layer.confirm('确认要删除吗？', function(index) {
    				$.post("../adminProduct?reqName=deleteProduct",{
    					productId : id
    				},function(res){
    					if (res.success) {
    						layer.msg(res.message, {icon : 1,time : 2000});
    						$(obj).parents("tr").remove();
    						 myPage();
    					} else {
    						layer.msg(res.message, {icon : 1,time : 2000});
    					}
    				},"json")
    			});
    		}
            
       </script>

</body>
</html>